<template>
  <div class="my-content">
    <!-- 这是右上角的操作按钮和显示修改记录区域 -->
    <right-top></right-top>
    <!-- 这是选项卡区域 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="编辑" name="edit">
        <edit :editTimes="editTimes"></edit>
      </el-tab-pane>
      <el-tab-pane label="测试" name="test">
        <test :testTime="testTime"></test>
      </el-tab-pane>
      <el-tab-pane label="修改记录" name="update">
        <update :times="times"></update>
      </el-tab-pane>
      <el-tab-pane label="出/入参模板管理" name="template">
        <param-template></param-template>
      </el-tab-pane>
      <el-tab-pane label="评论/回复" name="comment" v-if="false">
        <comment></comment>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RightTop from "./contentComponents/rightTop";
import Edit from "./contentComponents/edit";
import Test from "./contentComponents/test";
import Update from "./contentComponents/update";
import Comment from "./contentComponents/comment";
import ParamTemplate from "./contentComponents/ParamTemplate";

export default {
  name: "my-content",
  components: {
    RightTop,
    Edit,
    Test,
    Update,
    Comment,
    ParamTemplate
  },
  data () {
    return {
      tabs: new Map([["edit", "editTimes"], ["test", "testTime"], ["update", "times"], ["template", "template"]]),
      activeName: "edit",
      editTimes: "",
      testTime: "",
      times: ""

    };
  },
  methods: {
    handleClick (tab, event) {
      // 222
      this[this.tabs.get(tab.name)] = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped>
.my-content {
  position: relative;
}
</style>
